
<!--音乐播放页面-->
<template>
  <!--
  <audio controls ref="audioRef" preload="auto"
         @timeupdate="changeInfo"
         @canplaythrough="readyPlayInfo"
         @ended="normalEnd">
    <source :src="musicSrc" type="audio/mp3"/>
  </audio>
  
  <div class="play" @mouseover="showPlayPage" @mouseleave="hidePlayPage" :class="playPageObj">
    <div class="play-lock">
      <div class="lock-stuff"></div>
      <div class="lock-ico">
        <div class="lock-style-common" :class="lockStatus" @click="changeLockStatus"></div>
      </div>
    </div>
    <div class="play-list">
      <div class="play-content">
        <!--播放按钮列表->
        <div class="play-btn-list">
          <div class="pre-btn" @click="pre"></div>
          <div class="play-paused-common" :class="playOrPausedStyle" @click="playOrPause"></div>
          <div class="next-btn" @click="next"></div>
        </div>
        <!--播放进度条->
        <div class="play-pro">
          <img class="play-ico" v-if="!isShowPicSrc" alt/>
          <img class="play-ico" :src="picSrc" v-else alt/>

          <div class="play-bar-list" @mouseup="mouseUpChangePlayPro()">
            <div class="music-info">
              <span class="pro-music-name">{{songName}}</span>
              <span class="pro-singer-name">{{singerName}}</span>
            </div>
            <div class="play-bar">
              <div class="pro-bar"
                   @click="clickChangePlayPro(proBarRef,$event)"
                   ref="proBarRef">
                <!--预加载进度->
                <div class="play-preload-pro-bar" :style="preLoadPro"></div>
                <!--播放进度条->
                <div class="play-pro-bar" :style="playPro"></div>
                <!--进度按钮->
                <div class="play-block"
                     :style="playBlockPro"
                     ref="playBlockRef"
                     @mousedown="mouseDownChangePlayPro(playBlockRef,$event)"></div>
              </div>
              <!--显示当前播放时间和总时间->
              <div class="time-info">
                <span class="music-currentTime">{{currentTime}}</span>
                <span class="division">/</span>
                <span class="music-totalTime">{{totalTime}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="sound-model-list">
          <!--处理声音->
          <div class="play-sound">
            <div class="sound" :class="voiceStatus ? openVoice : closedVoice"  @click="isShowSoundBar=!isShowSoundBar"></div>
            <div class="sound-bar" v-show="isShowSoundBar" @click="soundBarPro(soundBarRef,$event)" ref="soundBarRef">
              <div class="sound-pro-bar" :style="soundProBarStyle"></div>
              <div class="sound-block" :style="soundBlockStyle"></div>
            </div>
          </div>

          <!--处理播放模式
          单曲循环:single-cycle
          随机播放:random-play
          列表循环:list-cycle
          ->
          <div class="common-model" :class="playModel" @click="changePlayModel">
            <div :class="{ 'showModel': showPlayModel.isShowModel } ">{{showPlayModel.showContent}}</div>
          </div>

          <!--播放列表，配合播放模式->
          <div class="play-music-list">
            <!--消息通知->
            <div :class="{'msg-note':showPlayOrAddInfo.isShowPlayOrAddInfo }">{{ showPlayOrAddInfo.playOrAddInfo }}</div>
			
            <div class="music-list-ico" @click="isShowMusicList=!isShowMusicList">
              <span>{{musicNumber}}</span>
            </div>
			
            <div class="music-list" v-show="isShowMusicList">
              <div class="music-list-head">
                <div class="music-list-info">
                  播放列表(<span>{{musicNumber}}</span>)
                </div>
                <div class="clear-close-list">
                  <div class="clear-list" @click="clearAllMusicList">
                    <span class="clear-list-ico"></span>
                    <span class="clear-list-text">清除</span>
                  </div>
                  <span class="close-list-ico" @click="hideMusicList"></span>
                </div>
              </div>

              <div class="music-list-content">
                <ol>
                  <li v-for="(music,index) in musicObjData"
                      :key="music.id"
                      @click="playMusic(music.id)"
                      :class="{
                          'init-background-color': music.id!==isChangeBgColor,
                          'init-font-color': music.id!==isChangeBgColor,
                          'change-background-color': music.id===isChangeBgColor,
                          'change-font-color': music.id===isChangeBgColor
                      }">
                    <div class="music-list-sn">{{index+1}}</div>
                    <div class="music-name">{{music.name}}</div>
                    <div class="music-signer">{{music.singer}}</div>
                    <div class="music-other">
                      <div class="music-load" @click.stop="downLoadMusicFile(music.url,music.singer+'-'+music.name,music.contentType)"></div>
                      <div class="music-delete" @click.stop="removeMusic(music.id)"></div>
                    </div>
                    <div class="music-list-totalTime">{{music.totalTime}}</div>
                  </li>
                </ol>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  -->
  
  
  <!--第二版 重构页面布局-->
  
  <el-container class="container">
	<!--audio元素 隐身-->  
	<el-header class="audioEl">
		<audio controls ref="audioRef" preload="auto"
		    @timeupdate="changeInfo"
		    @canplaythrough="readyPlayInfo"
		    @ended="normalEnd">
		    <source :src="musicSrc" type="audio/mp3"/>
		</audio>  
	</el-header>  
	<el-container class="playUI">
		<!--里面包含-->
		<div class="play" @mouseover="showPlayPage" @mouseleave="hidePlayPage" :class="playPageObj">
			<el-row>
				<!--第一行-->
				<el-col>
					<el-row class="play-lock">
						<el-col :span="11"></el-col>
						<el-col :span="2">
							<div class="lock-ico">
								<div class="lock-style-common" :class="lockStatus" @click="changeLockStatus"></div>
							</div>
						</el-col>
					</el-row>
				</el-col>
				
				<!--第二行-->
				<el-col>
					<el-row class="play-list">
						<el-col :span="4"></el-col>
						<el-col :span="16">
							<el-row class="play-content">
								<!--播放按钮列表-->
								<el-col :span="3">
									<el-row class="play-btn-list">
										<el-col :span="6"><div class="pre-btn" @click="pre"></div></el-col>
										<el-col :span="7"><div class="play-paused-common" :class="playOrPausedStyle" @click="playOrPause"></div></el-col>
										<el-col :span="6"><div class="next-btn" @click="next"></div></el-col>
										<el-col :span="5"></el-col>
									</el-row>  
								</el-col>
	
								<!--播放进度条-->
								<el-col :span="16">
									<el-row class="play-pro">
										<!--图像-->
										<el-col :span="2" class="picStyle">
											<!--假的参数params，后期换成自己的 :to="{ name: 'LyricShow',params: { id: 123 } }"-->
											<router-link :to="{ name: 'LyricShow' }">
												<img class="play-ico" v-if="!isShowPicSrc" alt/>
												<img class="play-ico" :src="picSrc" v-else alt/>
											</router-link>
										</el-col>
										<!--进度条-->
										<el-col :span="22">
											<el-row class="play-bar-list" @mouseup="mouseUpChangePlayPro()">
												<el-col class="music-singer-name">
													<el-row class="music-info">
														<el-col :span="24">
															<span class="pro-music-name">{{songName}}</span>
															<span class="pro-singer-name">{{singerName}}</span>
														</el-col>
													</el-row>
												</el-col>
												<el-col class="music-play-bar">
													<el-row class="play-bar">
														<el-col :span="21">
															<div class="pro-bar" @click="clickChangePlayPro(proBarRef,$event)" ref="proBarRef">
																<!--预加载进度-->
																<div class="play-preload-pro-bar" :style="preLoadPro"></div>
																<!--播放进度条-->
																<div class="play-pro-bar" :style="playPro"></div>
																<!--进度按钮-->
																<div class="play-block"
																     :style="playBlockPro"
																     ref="playBlockRef"
																     @mousedown="mouseDownChangePlayPro(playBlockRef,$event)">
																</div>
															</div>
														</el-col>
														<!--显示当前播放时间和总时间-->
														<el-col :span="3" class="time-info">
															<el-row>
																<el-col :span="11"><span class="music-currentTime">{{currentTime}}</span></el-col>
																<el-col :span="2"><span class="division">/</span></el-col>
																<el-col :span="11"><span class="music-totalTime">{{totalTime}}</span></el-col>
															</el-row>
														</el-col>
													</el-row>
												</el-col>
											</el-row>
										</el-col>
									</el-row>
								</el-col>
								
								<!--声音，播放模式，播放列表-->
								<el-col :span="4">
									<el-row class="sound-model-list">
										<el-col :span="5"></el-col>
										<!--处理声音-->
										<el-col :span="5" class="play-sound">
											<div class="sound" :class="voiceStatus ? openVoice : closedVoice"  @click="isShowSoundBar=!isShowSoundBar"></div>
											<div class="sound-bar" v-show="isShowSoundBar" @click="soundBarPro(soundBarRef,$event)" ref="soundBarRef">
												<div class="sound-pro-bar" :style="soundProBarStyle"></div>
												<div class="sound-block" :style="soundBlockStyle"></div>	
											</div>
										</el-col>
										
										<!--
										处理播放模式
										单曲循环:single-cycle
										随机播放:random-play
										列表循环:list-cycle
										-->
										<el-col :span="5" class="play-model">
											<div class="common-model" :class="playModel" @click="changePlayModel">
											    <div :class="{ 'showModel': showPlayModel.isShowModel } ">{{showPlayModel.showContent}}</div>
										    </div>
										</el-col>
										<!--播放列表，配合播放模式-->
										<el-col :span="9" class="play-music-list">
											<div class="music-list-ico" @click="isShowMusicList=!isShowMusicList">
											    <span>{{musicNumber}}</span>
											 </div>	
											<!--消息通知-->
											<div :class="{'msg-note':showPlayOrAddInfo.isShowPlayOrAddInfo }">{{ showPlayOrAddInfo.playOrAddInfo }}</div> 
											
											<div class="music-list" v-show="isShowMusicList">
											    <el-row>
													<!--头-->
													<el-col class="music-list-head">
														<el-row>
															<!--头左-->
															<el-col :span="5"><div class="music-list-info">播放列表({{musicNumber}})</div></el-col>
															<el-col :span="13"></el-col>
															
															<!--头右-->
															<el-col :span="6">
																<el-row class="clear-close-list">
																	<!--清除列表-->
																	<el-col :span="12" @click="clearAllMusicList">
																		<el-row>
																			<el-col :span="12">
																				<div class="clear-ico">
																				    <div class="clear-list-ico"></div>	
																				</div>
																			</el-col>
																			<el-col :span="12"><div class="clear-list-text">清除</div></el-col>
																		</el-row>
																    </el-col>
																	
																	<!--关闭图标-->
																	<el-col :span="12">
																		<div class="close">
																		    <div class="close-list-ico" @click="hideMusicList"></div>	
																		</div>
																	</el-col>
																</el-row>
															</el-col>
														</el-row>
													</el-col>
													
													<!--内容-->
													<el-col>
														<div class="music-list-content">
															<el-row v-for="(music,index) in musicObjData"
														          :key="music.id"
														          @click="playMusic(music.id)"
														          :class="{
																	  'init-color':music.id!==isChangeBgColor,
																	  'change-color':music.id===isChangeBgColor
																  }"
																  >
																<el-col :span="2"><div class="music-list-sn">{{index+1}}</div></el-col>
																<el-col :span="10"><div class="music-name">{{music.name}}</div></el-col>
																<el-col :span="6"><div class="music-signer">{{music.singer}}</div></el-col>
																<el-col :span="3">
																	<el-row class="music-other">
																		<el-col :span="12">
																			<div class="music-load" @click.stop="downLoadMusicFile(music.url,music.singer+'-'+music.name,music.contentType)"></div>
																		</el-col>
																		<el-col :span="12">
																			<div class="music-delete" @click.stop="removeMusic(music.id)"></div>
																		</el-col>
																	</el-row>
																</el-col>
																<el-col :span="3"><div class="music-list-totalTime">{{music.totalTime}}</div></el-col>
															</el-row>
														</div>
													</el-col>
												</el-row>  
											</div>	
										</el-col>
									</el-row>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
		</div>	
	</el-container>  
  </el-container>
  
  
  <!--歌词显示部分-->
  <!--
  <div class="lyric-area">
    <ul id="lyric_bg"></ul>
    <ul id="lyric_fg"></ul>
  </div>
  -->
</template>

<script setup>
import {ref, reactive, computed, onMounted, toRef, watch, onBeforeUnmount} from "vue";
import axios from "axios";
import { useMusicInfoStore } from "@/stores/musicInfo"

//锁的切换
let lockStatus=ref('locked');
function changeLockStatus(){
  lockStatus.value=lockStatus.value==="locked" ? 'unlock' : 'locked';
}

let playPageObj=reactive({
  hoverStyle: false,
  mouseleaveStyle: false
});

//鼠标浮动时
function showPlayPage(){
  if(lockStatus.value==="unlock"){
    playPageObj.hoverStyle= true;
    playPageObj.mouseleaveStyle= false;
  }
}

//鼠标离开时
function hidePlayPage(){
  if(lockStatus.value==="unlock"){
    playPageObj.hoverStyle= false;
    playPageObj.mouseleaveStyle=true;
  }
}

//声音大小界面隐藏与展示
let isShowSoundBar=ref(false);
//播放列表隐藏与展示
let isShowMusicList=ref(false);

//关闭播放列表
function hideMusicList(){
  isShowMusicList.value= false;
}

//切换播放模式
//model
//single-cycle 单曲循环
//random-play  随机播放
//list-cycle   列表循环
//

let showPlayModel=ref({
  isShowModel:false,
  showContent:""
})

//添加或者播放信息通知
let showPlayOrAddInfo=reactive({
  isShowPlayOrAddInfo:false,
  playOrAddInfo:""
});


//显示消息，这里代码冗余，最好将显示消息做成一个组件
let i=0;
let clearFlag=-1;

let j=0;
let clearInFo=-1;

function changeModel(isFlag,content){
  if(isFlag){
	j++;
	if(j>1){
		clearTimeout(clearInFo);
	}
    showPlayModel.value.isShowModel=true;
    showPlayModel.value.showContent=content;
    clearInFo=setTimeout(()=>{
      showPlayModel.value.isShowModel=false;
      showPlayModel.value.showContent="";
	  j=0;
	  clearInFo=-1;
    },1500);
  }else{ 
	i++;
	if(i>1){
		clearTimeout(clearFlag);
	} 
	 
    showPlayOrAddInfo.isShowPlayOrAddInfo=true;
    showPlayOrAddInfo.playOrAddInfo=content;
    clearFlag=setTimeout(()=>{
      showPlayOrAddInfo.isShowPlayOrAddInfo=false;
      showPlayOrAddInfo.playOrAddInfo="";
	  i=0;
	  clearFlag=-1;
    },1500);
  }
}

let playModel=ref("random-play");

function changePlayModel(){
  if(playModel.value==="list-cycle"){
    playModel.value="single-cycle";
    changeModel(true,"单曲循环");
  }else if(playModel.value==="single-cycle"){
    playModel.value="random-play";
    changeModel(true,"随机播放");
  }else{
    playModel.value="list-cycle";
    changeModel(true,"列表循环");
  }
}


//读取数据
const musicStore=useMusicInfoStore();
let objData=musicStore.musicInfo;
let msg=musicStore.playOrAddInfo;

//歌曲对象
let musicObjData=ref(objData.music);

watch(()=>objData.status,(newValue)=>{
  //没有数据，添加数据，播放
  if(newValue==="NoDataAndPlay"){
    playMusic(objData.id);
  }
  //没有数据，添加数据，不播放
  if(newValue==="NoDataAndNoPlay"){
    let audio=audioRef.value;
    let status=audio.paused;
    let id=objData.id;
    if(id!==""){
      //暂停或者播放
      if(status){
        //暂停状态
		musicStore.updatePlayStatus(id,"paused");
      }else{
        //播放状态
		musicStore.updatePlayStatus(id,"play");
      }
    }else{
        //从未播放过
	   musicStore.updatePlayStatus("","never");
    }
  }

  //有数据，播放
  if(newValue==="HasDataNeverPlay" || newValue==="HasDataPrePlayOrPausedIsNotMe"){
    playMusic(objData.id);
  }

  //继续播放
  if(newValue==="HasDataPrePausedIsMe"){
    playOrPause();
  }
})

watch(()=>msg.info,(newValue)=>{
  if(newValue!=="" && newValue!==null){
    changeModel(false,newValue);
	msg.info="";
  }
})

//删除全部歌曲
function clearAllMusicList(){
  musicStore.removeMusic();
}

//删除单个歌曲------需要修改
function removeMusic(id){
  musicStore.removeMusic(id);
}

//下载音乐文件-----文件名过长导致浏览器下载出现文件名被截断问题，需要解决
function downLoadMusicFile(musicUrl,musicName,contentType){
  const options={
    url:"/music/download",
    data:{ url: musicUrl },
    method:"POST",
    headers:{"Content-Type":"application/x-www-form-urlencoded"},
    responseType: "blob"
  }
  axios(options).then(res=>{
    const blob=new Blob([res.data],{ type: contentType });
    let link=document.createElement("a");
    link.href=window.URL.createObjectURL(blob);
    link.style.display="none";
    link.download=musicName;
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(link.href);
    document.body.removeChild(link);
  });
}

//歌曲数量
let musicNumber=computed(()=>{
  return musicObjData.value.length;
});

//音乐初始化路径
let musicSrc=ref("");

//audio引用
let audioRef=ref(null);

//设置图片属性
let picSrc=ref("");

//是否显示图片src属性
let isShowPicSrc=ref(false);

//歌名
let songName=ref("");
//歌手名
let singerName=ref("");

//当前时间
let currentTime=ref("");
//歌总时间
let totalTime=ref("");

//播放距离
let playDistance=ref(0);
//预加载距离
let preLoadDistance=ref(0);

//预加载进度
let preLoadPro=ref({
  width: preLoadDistance.value+"px"
});

//进度条距离
let playPro=ref({
  width: playDistance.value+"px"
});

//进度条滑块距离
let playBlockPro=ref({
  left: (playDistance.value-8)+"px"
})

//播放或者暂停时的样式
let playOrPausedStyle=ref("play-btn");

//背景颜色是否变色
let isChangeBgColor=ref(-1);

//播放列表播放处理---需要更新样式和歌词
function playMusic(id){
  isChangeBgColor.value=id;
  let audio=audioRef.value;
  musicObjData.value.forEach(music => {
    if(music.id===id){
      musicSrc.value= music.url;
      isShowPicSrc.value= true;
      picSrc.value= music.picUrl;
      songName.value=music.name;
      singerName.value=music.singer;
    }
  });
  //切换路径后一定要重载，否则不播放
  audio.load();
  playOrPausedStyle.value="paused-btn";
  audio.play();
  musicStore.updatePlayStatus(id,"play");
  msg.info="正在播放";
  //TODO 歌词样式和背景颜色的处理

}

//播放模式
function playMode(signal){
  let audio=audioRef.value;
  playOrPausedStyle.value="play-btn";
  audio.pause();
  let model= playModel.value; //播放模式
  let currentIndex=-1;  //当前播放的音乐在数组中的位置
  musicObjData.value.forEach((music,index) => {
    if(music.url===musicSrc.value){
      currentIndex= index;
    }
  });
  
  if(currentIndex==-1){
	currentIndex=0;  
  }
  
  if(model==="single-cycle" || model==="list-cycle"){ //单曲循环或者列表循环
    if(signal==="pre"){
      currentIndex = currentIndex ===0 ? musicNumber.value-1 : currentIndex-1;//上一首
    }else if(signal==="next"){
      currentIndex = currentIndex === (musicNumber.value-1) ? 0 : currentIndex+1; //下一首
    }else{
      if(model==="list-cycle"){
        currentIndex = currentIndex === (musicNumber.value-1) ? 0 : currentIndex+1; //正常情况结束上一首，自动播放下一首
      }
      //循环播放，位置不变
    }
  }else{
    if(musicNumber.value!=1){
      let randomIndex=-1;
      do{
        randomIndex=Math.floor(Math.random()*musicNumber.value); //随机播放
      }while(randomIndex===currentIndex);
      currentIndex=randomIndex;
    }
  }
  let music= musicObjData.value[currentIndex];
  musicSrc.value= music.url;
  isShowPicSrc.value= true;
  picSrc.value= music.picUrl;
  songName.value=music.name;
  singerName.value=music.singer;
  isChangeBgColor.value=music.id;

  audio.load();
  playOrPausedStyle.value="paused-btn";
  audio.play();
  //需要切换当前id
  musicStore.updatePlayStatus(music.id,"play");
  msg.info="正在播放";
  //TODO 歌词样式和背景颜色的处理
}

//播放或者暂停
function playOrPause(){
  if(musicSrc.value !=""){
	let audio=audioRef.value;
	let status=audio.paused; 
	if(status){
		playOrPausedStyle.value="paused-btn";
		audio.play();
		musicStore.updatePlayStatus(objData.id,"play");
		msg.info="正在播放";
	}else{
		playOrPausedStyle.value="play-btn";
		audio.pause();
		musicStore.updatePlayStatus(objData.id,"paused");
		msg.info="暂停播放";
	}
  }  
}

//上一首
function pre(){
  musicObjData.value.length==0 ? resetMusic() : playMode("pre");	
}

//下一首
function next(){
  musicObjData.value.length==0 ? resetMusic() : playMode("next");	
}

//格式化时间
function formatTime(time){
  let minutes;
  let seconds;
  if(time>60){
    minutes=Math.floor(time/60);
    seconds=Math.floor(time%60);

    if(minutes<10){
      minutes="0"+minutes;
    }
    if(seconds<10){
      seconds="0"+seconds;
    }
    return minutes+":"+seconds;
  }else{
    minutes="00";
    if(time<10){
      seconds="0"+parseInt(time);
    }else{
      seconds=parseInt(time);
    }
    return minutes+":"+seconds;
  }
}

//可以播放时
function readyPlayInfo(){
  //设置初始化声音
  let audio=audioRef.value;
  audio.volume=0.5;
  //获取总时间显示
  totalTime.value=formatTime(audioRef.value.duration);
}

//播放进度
function playProgress(progressStatus){
  //音频引用
  let audio=audioRef.value;
  //判断音频路径是否存在
  if(musicSrc.value!=""){
	let progress;
	let cur_Time =audio.currentTime;
	let totalTime=audio.duration;
	if(progressStatus==="retreat"){
	  //后退
	  cur_Time-=1;
	  if(cur_Time<=0){
	    cur_Time=0;
	  }
	  audio.currentTime=cur_Time;
	  //updateLRCPro();
	}else if(progressStatus==="goForward"){
	  //前进
	  cur_Time+=1;
	  if(cur_Time>=totalTime){
	    cur_Time=totalTime;
	  }
	  audio.currentTime=cur_Time;
	  //更新歌词
	  //updateLRCPro();
	}
	currentTime.value=formatTime(cur_Time);
	playDistance.value=cur_Time*493/totalTime;
	
	let timeRang=audio.buffered;
	if(timeRang.length>0){
	  progress=timeRang.end(timeRang.length-1);
	}
	preLoadDistance.value=parseInt(progress+"")*493/totalTime;
	//设置缓存进度条
	preLoadPro.value.width=preLoadDistance.value+"px";
	//设置播放进度条
	playPro.value.width=playDistance.value+"px";
	playBlockPro.value.left=(playDistance.value-8)+"px";
	//更新歌词
	//updateLRCPro();  
  }
}

//时间变更时
function changeInfo(){
  playProgress("normal");
}

//重置音乐信息
function resetMusic(){
	let audio=audioRef.value;
	//播放状态下
	if(!audio.paused){
		audio.pause();		
	}
	//重置音乐路径
	musicSrc.value="";
	//重置是否显示图片
	isShowPicSrc.value=false;
	//重置图片路径
	picSrc.value="";
	//重置歌名
	songName.value="";
	//重置歌手名
	singerName.value=""
	//重置歌曲总时间
	totalTime.value="";
	//重置当前播放时间
	currentTime.value="";
	//预加载进度条没有恢复
	preLoadDistance.value=0;
	//播放距离没有恢复
	playDistance.value=0; 
	preLoadPro.value.width=preLoadDistance.value+"px";
	playPro.value.width=playDistance.value+"px";
	playBlockPro.value.left=(playDistance.value-8)+"px";
	//重置之后必须执行load()函数，重载之后会触发timeupdate事件
	//执行changeInfo()函数
	audio.load();
}

//正常播放结束
function normalEnd(){
  musicObjData.value.length==0 ? resetMusic() : playMode("normal");
}

onMounted(()=> {
  document.onkeydown=(e)=>{
    //键盘事件
     //空格键控制音乐播放或者暂停
     //向左键控制歌曲后退
     //向右键控制歌曲快进
     //向上键控制声音增大   没做
     //向下键控制声音减小   没做
     //
    switch (e.code) {
      case "Space":                 //空格键
        playOrPause();
        break;
      case "ArrowLeft":             //向左键
        playProgress("retreat");
        break;
      case "ArrowRight":            //向右键
        playProgress("goForward");
        break;
      default:
        break;
    }
  }
});

//解除自定义事件绑定还不太清楚
onBeforeUnmount(()=>{

})

//proBarRef引用
const proBarRef=ref(null);
const playBlockRef=ref(null);

//鼠标滑动事件---------待改进
function mouseDownChangePlayPro(el,event){
  let e=event || event.target;
  let startPoint=e.clientX;
  let diffX=el.offsetLeft;
  document.onmousemove=(event)=>{
    //let e=event || window.event;
    let e=event || event.target;
    let endX=e.clientX;
    let moveX=endX-startPoint+diffX;

    if(moveX>=0 && moveX<=493){
      playPro.value.width=moveX+"px";
      playBlockPro.value.left=(moveX-8)+"px";
	  if(musicSrc.value!=""){
		let audio=audioRef.value;
		audio.currentTime=(moveX * audio.duration/493); 
		if(!audio.paused){
		    audio.play();
		}
		//updateLrcLocation();
		//updateLRCPro();
	  }  
    }
  }
}

function mouseUpChangePlayPro(){
  document.onmousemove=null;
}

//鼠标点击进度条进行快进或者后退
function clickChangePlayPro(el,event){
  //let e=event || window.event;
  let e=event || event.target;
  let distance=e.clientX-el.getBoundingClientRect().left;
  playPro.value.width=distance+"px";
  playBlockPro.value.left=(distance-8)+"px";
  
  if(musicSrc.value!=""){
	let audio=audioRef.value; 
	audio.currentTime=(distance * audio.duration/493);
	if(!audio.paused){
	    audio.play();
	}
	
	//updateLrcLocation();
	//updateLRCPro();
  } 
}

let soundBarRef=ref(null);

//初始声音样式
let soundProBar=ref(48);
let soundBlock=ref(51);

let soundProBarStyle=ref({
  height:soundProBar.value+"px"
});
let soundBlockStyle=ref({
  bottom:soundBlock.value+"px"
});

let voiceStatus=ref(true);
let openVoice=ref("open-voice");
let closedVoice=ref("closed-voice");

//声音进度条点击处理
function soundBarPro(el,event){
  let audio=audioRef.value;
  let e=event || event.target;
  let distanceBottom=105+el.getBoundingClientRect().top-e.clientY;
  if(distanceBottom<=9){
    distanceBottom=9;
    voiceStatus.value=false;
  }else {
    voiceStatus.value=true;
    if(distanceBottom>=93){
      distanceBottom=93;
    }
  }
  soundBlockStyle.value.bottom=distanceBottom+"px";
  soundProBarStyle.value.height=((distanceBottom-9) * 96/84)+"px";
  //设置声音大小
  let currentVoicePercent=((distanceBottom-9)/84).toFixed(2);
  audio.volume=currentVoicePercent;
}
//声音滑动事件
</script>

<style scoped lang="less">

//图片变量
@playbarPic:"../assets/pic/playbar.png";
@playlistPic:"../assets/pic/playlist.png";
@statbarPic:"../assets/pic/statbar.png";
@iconallPic:"../assets/pic/iconall.png";

//mixin 混入
*{
  margin:0;
  padding:0;
  font-size:12px;
  color:black;
}

.container{
	.audioEl{
		audio{
			display:none;
		}
	}
	.playUI{
		.play{
			width:100%;
			height:60px;
			position:fixed;
			bottom:0;
			transition:height 1s;
			.play-lock{
				width:100%;
				height:14px;
				.lock-ico{
					width: 42%;
					height: 100%;
					cursor:pointer;
					margin: 0 auto;
					background:url(@playbarPic) no-repeat 0px -386px;
					.lock-style-common{
						width: 26%;
						height:100%;
						margin: 0 auto;
						background:url(@playbarPic) no-repeat;
					}
					//开锁状态
					.unlock{
						background-position:-82px -382px;
					    &:hover{
							background-position:-82px -402px;
					    }
					}
					//闭锁状态
					.locked{
					    background-position:-102px -382px;
					    &:hover{
							background-position:-102px -402px;
					    }
					}	  
				}
			}
			.play-list{
				width:100%;
				height:46px;
				background:url(@playbarPic) repeat-x 0 -8px;
				.play-content{
					height:100%;
					.play-btn-list{
						height:100%;
						//上一首按钮
						.pre-btn{
							width:100%;
							height:100%;
							background:url(@playbarPic) no-repeat -80px -120px;
							cursor:pointer;
							transform:rotate(180deg);
							&:hover{
							  background-position:-110px -120px;
							}
						}
						//播放、暂停按钮公共样式
						.play-paused-common{
							width:100%;
							height:100%;
							cursor:pointer;
						}
						//播放按钮
						.play-btn{
							background:url(@playbarPic) no-repeat 0 -199px;
						    &:hover{
								background-position:-40px -199px;
						    }
						}
						//暂停按钮
						.paused-btn{
						    background:url(@playbarPic) no-repeat 0 -160px;
						    &:hover{
								background-position:-40px -160px;
						    }
						}
						//下一首按钮
						.next-btn{
							width:100%;
							height:100%;
							background:url(@playbarPic) no-repeat -80px -120px;
							cursor:pointer;
							&:hover{
							  background-position:-110px -120px;
							}	
						}
					}
					.play-pro{
						width:100%;
						height:100%;
						.picStyle{
							position: relative;
							height: 100%;
							.play-ico{
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%,-50%);
								max-width: 90%;
								max-height: 90%;
							}
						}
						.play-bar-list{
						  height:100%;
						  width: 100%;
						  .music-singer-name{
							  height: 20px;
							  .music-info{
								  margin-left: 2%;
								  height: 100%;
								  display: flex;
								  align-items: center;
							      .pro-music-name{
									  color:white;
									  font-size: 90%;
								  }
								  //歌手名
								  .pro-singer-name{
									  margin-left: 5%;
									  font-size: 90%;
									  color:#cccccc;
								  }
							  }  
						  }
						  
						  .music-play-bar{
							  height: 26px;
							  .play-bar{ 
							      width:100%;
							      height:100%;
								  .pro-bar{
									  margin-left: 2%;
									  height:100%;
									  background:url(@statbarPic) no-repeat 0 7px;
									  position:relative;
									  cursor:pointer;
									  //预加载进度条
									  .play-preload-pro-bar{
										  height:100%;
									      background:url(@statbarPic) no-repeat 0 -22px;
									      position:absolute;
									  }
									  //播放进度条宽493px
									  .play-pro-bar{
									      height:100%;
									      background:url(@statbarPic) no-repeat 0 -58px;
									      position:absolute;
									  }
									  //进度按钮
									  .play-block{
										  top:4px;
									      width:18px;
									      height:18px;
									      background:url(@iconallPic) no-repeat -2px -253px;
									      border-radius:10px;
									      position:absolute;
									  }
								  }
								  //时间信息
								  .time-info{
									  display: flex;
									  justify-content: center; /* 水平居中 */
									  align-items: center; /* 垂直居中 */
									  height: 80%;
									  font-size: 90%;
								      .music-currentTime,.music-totalTime,.division{
										  color:white;
								      }
								  }
							  }  
						  }  
						}  	
					}
					.sound-model-list{
						height: 100%;
						.play-sound{
							width:100%;
                            height:100%;
							display:flex;
							align-items: center;
                            cursor:pointer;
							.sound{
							  width:100%;
							  height:60%;
							  background: url(@playbarPic) no-repeat;
							  cursor:pointer;
							}
							
							.open-voice{
							  background-position:0 -245px;
							  &:hover{
							    background-position:-29px -245px;
							  }
							}
							.closed-voice{
							  background-position:-100px -66px;
							  &:hover{
							    background-position:-122px -66px;
							  }
							}
							.sound-bar{
							  width: 33px;
							  height: 114px;
							  position:absolute;
							  bottom:46px;
							  background:url(@playbarPic) no-repeat 0 -502px;
							  //总高:96px
							  .sound-pro-bar{
							    width:6px;
							    height:48px;
							    position:absolute;
								background:url(@playbarPic) no-repeat -39px -523px;
								transform: rotate(180deg);
							    bottom:10px;
							    left:13px;
							  }
							  //bottom:9px最低,93px最高
							  .sound-block{
							    width:12px;
							    height:12px;
							    border-radius:10px;
							    position:absolute;
							    background:url(@iconallPic) no-repeat -43px -253px;
							    bottom:51px;     //只要控制bottom大小就可以调整
							    left:10px;
							  }	
							}
						}
						.play-model{
							width:100%;
							height:100%;
							display:flex;
							align-items: center;
							cursor:pointer;
							.common-model{
							    width:100%;
							    height:80%;
							    background:url(@playbarPic) no-repeat;
							    cursor:pointer;
							    .showModel{
							        text-align: center;
							        line-height: 24px;
							        color: white;
							        width: 60px;
							        height: 24px;
							        background-color:#292c2d;
							        border-radius: 5px;
							        opacity:0.8;
							        margin-left: -15px;
							        float: left;
							        position: absolute;
							        bottom: 47px;
							        cursor: pointer;
							    }
							}
							.list-cycle{
							    background-position:0 -335px;
							    &:hover{
							        background-position:-30px -335px;
							    }
							}
							.single-cycle{
							    background-position:-63px -335px;
							    &:hover{
							        background-position:-90px -335px; 
							    }
							}
							.random-play{
							    background-position:-63px -240px;
							    &:hover{
							        background-position:-90px -240px;
							    }
							}
						}
						.play-music-list{
							display: flex;
							align-items: center;
							width: 100%;
							height: 100%;
							.music-list-ico{
							    width:100%;
							    height:75%;
								display: flex;
								justify-content: center;
								align-items: center;
							    background:url(@playbarPic) no-repeat -45px -64px;
							    &:hover{
							        background-position:-45px -94px;
							    }
							    span{
									font-size: 0.9;
									display:inline-block;
									width:24px;
									height:24px;
									line-height:24px;
									text-align:center;
									margin-left:24%;
									color:#cccccc;
								}
							}
							.msg-note{
							    text-align: center;
							    line-height: 24px;
							    color: white;
							    width: 80px;
							    height: 24px;
							    background-color:#292c2d;
							    border-radius: 5px;
							    opacity:0.8;
							    margin-left: -30px;
							    float: left;
							    position: absolute;
							    bottom: 47px;
							    cursor: pointer;
							}
							.music-list{
							    position:absolute;
							    width:480px;
							    height:200px;
							    bottom:46px;
								left: -100%;
								cursor:pointer;
							    .music-list-head{
							        width:100%;
							        height:30px;
							        line-height:30px;
							        border-top-left-radius:5px;
							        border-top-right-radius:5px;
							        background-color:black;
							        opacity:0.8;
									.music-list-info{
										text-align: center;
							            color:#cccccc;
							        }
							        .clear-close-list{
							            width: 100%;
							            height:100%;
										.clear-ico{
											width:100%;
											height: 100%;
											display: flex;
											align-items: center;
											justify-content: right;
											.clear-list-ico{
											    width:80%;
											    height:80%;
												background:url(@playlistPic) no-repeat -40px 5px;
											    &:hover{
											        background-position:-40px -15px;
											    }
											}
										}
										
							            .clear-list-text{
											text-align: left;
											color:#cccccc;	
							            }
							            
										.close{
											width:100%;
											height: 100%;
											display: flex;
											align-items: center;
											justify-content: right;
											.close-list-ico{
											    width:50%;
											    height:50%;
												background:url(@playlistPic) no-repeat -204px 1px;
											    &:hover{
											        background-position:-204px -29px;
											    }
											}	
										}
							            
							        }
							    }
								
								.music-list-content{
									overflow-x:hidden;
									overflow-y:scroll;
									width:100%;
									height:170px;
									background-color:black;
									opacity:0.75;
									.el-row{
									    cursor:pointer;
										width: 100%;
										height:24px;
										line-height:24px;
										.el-col{
										    div{
											    color:dimgray;
												font-size: 90%;						
												height:24px;
												line-height:24px;
											}
											.music-list-sn{
											    text-align:center;
											}
											.music-name{
											    text-align: left;
											    overflow: hidden;
											    white-space: nowrap;
											    text-overflow: ellipsis;
											}
											.music-signer{
											    text-align: center;
											}
											
											.music-other{ 
												.music-load{
											        display: none;
													width: 100%;
													height: 100%;
											        background:url(@playlistPic) no-repeat -48px -46px;
											        &:hover{
											            background-position:-71px -46px;
											        }
											    }
											    .music-delete{
											        display: none;
													width: 100%;
													height: 100%;
											        background:url(@playlistPic) no-repeat -43px 4px;
											        &:hover{
											          background-position:-43px -16px;
											        }
											    }
											}
											.music-list-totalTime{
											    text-align:center;
											}
										}
										
										&:hover{
										    background-color:dimgray;
											.el-col{
											    div{
											        color: white;
											    }	
											} 
										    
											.music-load,.music-delete{
											    display: block !important;
											}
										}
									}
									.init-color{
									    background-color:black;
									    .el-col{
										    div{
										        color:dimgray;  
										    }	
										}
									}
									.change-color{
										background-color:dimgray;
										.el-col{
										    div{
										        color:white;  
										    }	
										}
										.music-load,.music-delete{
										    display: block !important;
										}
									 }
								}
								::-webkit-scrollbar{
								  width:8px;
								  background-color:rgba(255,255,255,0.6);
								  opacity:0.8;
								  cursor:pointer;
								}
								::-webkit-scrollbar-track{
								  background-color:rgba(0,0,0,0.6);
								}
								::-webkit-scrollbar-corner{
								  display: none;
								}
								::-webkit-scrollbar-button{
								  display: none;
								}
								::-webkit-scrollbar-thumb{
								  background-color:rgba(0,0,0,0.9);
								  border-radius:5px;
								  -webkit-box-shadow:inset 1px 1px rgba(0,0,0,1);
								}
							}
						}
					}	
				}	
			}
		}
		//鼠标浮动时
		.hoverStyle{
		  height: 60px;
		}
		//鼠标离开时
		.mouseleaveStyle{
		  height: 14px;
		}
	}
}	



//第一版样式Less重写

/*
//mixin 混入
#pro-music-singer-name{
  height:20px;
  line-height:20px;
  display:inline-block;
}

#music-currentTime-totalTime-division{
  height:100%;
  display:block;
  float:left;
  line-height:20px;
  color:white;
  text-align:center;
}

#music-currentTime-totalTime{
  width:35px;
}

#common-font-size{
  -webkit-transform-origin-x:0;
  -webkit-transform:scale(0.9);
}

#common-music-number{
  color:#cccccc;
}

//图片变量
@playbarPic:"../assets/pic/playbar.png";
@playlistPic:"../assets/pic/playlist.png";
@statbarPic:"../assets/pic/statbar.png";
@iconallPic:"../assets/pic/iconall.png";

*{
  margin:0;
  padding:0;
  font-size:12px;
  color:black;
}

audio{
  display:none;
}

.play{
  width:100%;
  height:60px;
  position:fixed;
  bottom:0;
  transition:height 1s;
  &-lock{
    width:100%;
	height:14px;
	clear: both;
	.lock-stuff{
	  float:left;
	  width:50%;
	  height:100%;
	}
	.lock-ico{
	  float:right;
	  width:50%;
	  height:100%;
	  background:url(@playbarPic) no-repeat 0 -386px;
	  cursor:pointer;
	  .lock-style-common{
	    width:20px;
		height:12px;
		margin:0 15px;
		background:url(@playbarPic) no-repeat; 		
	  }
      //开锁状态
      .unlock{
        background-position:-77px -382px;
        &:hover{
		  background-position:-77px -402px;
        }
      }
      //闭锁状态
      .locked{
        background-position:-98px -382px;
        &:hover{
      	  background-position:-98px -402px;
        }
      }	     
	}
  }
  &-list{
    width:100%;
	height:46px;
	background:url(@playbarPic) repeat-x 0 -8px;
	//播放按键区
	.play-content{
	  width:900px;   //原距离892px
	  height:42px;
	  padding:2px 0;
	  margin:auto;
	  overflow:hidden;
	  //播放按钮部分
	  .play-btn-list{
	    float:left;
		width:92px;
		height:100%;
		overflow:hidden;
		//上一首按钮
		.pre-btn{
		  float:left;
		  width:28px;
		  height:100%;
		  background:url(@playbarPic) no-repeat -80px -125px;
		  cursor:pointer;
		  transform:rotate(180deg);
		  &:hover{
		    background-position:-110px -125px;
		  }
		}
		//播放、暂停按钮公共样式
		.play-paused-common{
		  float:left;
		  width:32px;
		  height:100%;
		  padding:0 2px;
		  cursor:pointer;
		}
		//播放按钮
		.play-btn{
		  background:url(@playbarPic) no-repeat 0 -200px;
		  &:hover{
			background-position:-40px -200px;
		  }
		}
		//暂停按钮
		.paused-btn{
		  background:url(@playbarPic) no-repeat 0 -161px;
		  &:hover{
			background-position:-40px -161px;
		  }
		}
		//下一首按钮
		.next-btn{
		  float:right;
		  width:28px;
		  height:100%;
		  background:url(@playbarPic) no-repeat -80px -122px;
		  cursor:pointer;
		  &:hover{
		    background-position:-110px -122px;
		  }	
		}
	  }	
	  //播放进度条
	  .play-pro{
	    float:left;
		width:633px;   //原距离625px
		height:100%;
		margin:0 25px;
		overflow:hidden;
		//歌手专辑
		.play-ico{
		  margin:4px auto;
		  width:34px;
		  height:34px;
		  float:left;
		}
		.play-bar-list{
		  float:right;
		  height:100%;
		  margin-left:10px;
		  width:589px;   //原距离581px
		  //歌曲名和歌手名信息
		  .music-info{
		    width:100%;
			height:20px;
			margin-left:10px;
			//音乐名
			.pro-music-name{ 
			  color:white;
			  #common-font-size;
              #pro-music-singer-name;
			}
			//歌手名
			.pro-singer-name{
			  #common-font-size;	
			  #pro-music-singer-name; 
			  margin:0 10px;
			  color:#cccccc;
			}
		  }
          .play-bar{
            width:100%;
            height:20px;
            overflow:hidden;
            //进度条背景
            .pro-bar{
              margin-left: 8px;
              float:left;
              width:493px;
              height:100%;
              background:url(@statbarPic) no-repeat 0 6px;
              position:relative;
              cursor:pointer;
              //预加载进度条
              .play-preload-pro-bar{
                height:100%;
                background:url(@statbarPic) no-repeat 0 -24px;
                position:absolute;
              }
              //播放进度条宽493px
              .play-pro-bar{
                height:100%;
                background:url(@statbarPic) no-repeat 0 -60px;
                position:absolute;
              }
              //进度按钮
              .play-block{
                width:16px;
                height:18px;
                background:url(@iconallPic) no-repeat -3px -251px;
                border-radius:10px;
                position:absolute;
              }
            }
            //时间信息
            .time-info{
              float:right;
              margin-left:0;
              width:79px;
              height:20px;
              overflow:hidden;
			  #common-font-size;
              .music-currentTime{
                #music-currentTime-totalTime;
                #music-currentTime-totalTime-division;
              }
              .division{
                #music-currentTime-totalTime-division;
                width:8px;
              }
              .music-totalTime{
                #music-currentTime-totalTime;
                #music-currentTime-totalTime-division;
              }
            }
          }
		}
	  }
      .sound-model-list{
        float:left;
        width:125px;
        height:100%;
        overflow:hidden;
        //处理声音
        .play-sound{
          width:32px;
          height:100%;
          display:inline-block;
          float:left;
          cursor:pointer;
          .sound{
            width:100%;
            height:100%;
            background: url(@playbarPic) no-repeat;
            cursor:pointer;
          }
		  .open-voice{
		    background-position:0 -240px;
		    &:hover{
		      background-position:-29px -240px;
		    }
		  }
		  .closed-voice{
		    background-position:-100px -60px;
		    &:hover{
		      background-position:-122px -60px;
		    }
		  }
          .sound-bar{
            width: 33px;
            height: 114px;
            position:absolute;
            bottom:47px;
            background:url(@playbarPic) no-repeat 0 -502px;
            //总高:96px
            .sound-pro-bar{
              width:6px;
              height:48px;
              position:absolute;
              background:url(@playbarPic) no-repeat -39px -519px;
              bottom:10px;
              left:13px;
            }
            //bottom:9px最低,93px最高
            .sound-block{
              width:12px;
              height:12px;
              border-radius:10px;
              position:absolute;
              background:url(@iconallPic) no-repeat -43px -253px;
              bottom:51px;     //只要控制bottom大小就可以调整
              left:10px;
            }
          }
        }
        //默认播放模式是列表循环，下面是默认播放模式
        .common-model{
          width:32px;
          height:100%;
          background:url(@playbarPic) no-repeat;
          float:left;
          cursor:pointer;
		  .showModel{
		    text-align: center;
		    line-height: 24px;
		    color: white;
		    width: 60px;
		    height: 24px;
		    background-color:#292c2d;
		    border-radius: 5px;
		    opacity:0.8;
		    margin-left: -15px;
		    float: left;
		    position: absolute;
		    bottom: 47px;
		    cursor: pointer;
		  }
        }
		.list-cycle{
		  background-position:0 -335px;
		  &:hover{
		    background-position:-30px -335px;
		  }
		}
		.single-cycle{
		  background-position:-63px -335px;
		  &:hover{
		    background-position:-90px -335px; 
		  }
		}
		.random-play{
		  background-position:-63px -240px;
		  &:hover{
		    background-position:-90px -240px;
		  }
		}
        .play-music-list{
          width:56px;
          height:100%;
          float:right;
          cursor:pointer;
		  .msg-note{
		    text-align: center;
		    line-height: 24px;
		    color: white;
		    width: 80px;
		    height: 24px;
		    background-color:#292c2d;
		    border-radius: 5px;
		    opacity:0.8;
		    margin-left: -30px;
		    float: left;
		    position: absolute;
		    bottom: 47px;
		    cursor: pointer;
		  }
          .music-list-ico{
            width:100%;
            height:36px;
            margin:5px 0;
            background:url(@playbarPic) no-repeat -45px -65px;
			#common-font-size;
            &:hover{
              background-position:-45px -95px;
            }
            span{
              width:32px;
              height:32px;
              text-align:center;
              color:#cccccc;
              line-height:32px;
              display:inline-block;
              margin-left:20px;
			  #common-music-number;
            }
          }
          .music-list{
            position:absolute;
            width:480px;
            height:200px;
            bottom:36px;
            right:80px;
            cursor:pointer;
			#common-font-size;
            .music-list-head{
              width:100%;
              height:30px;
              line-height:30px;
              overflow:hidden;
              border-top-left-radius:5px;
              border-top-right-radius:5px;
              background-color:black;
              opacity:0.8;
              .music-list-info{
                float:left;
                padding-left:20px;
                color:#cccccc;
				span{
				  #common-music-number;
				}
              }
              .clear-close-list{
                float:right;
                width:90px;
                height:100%;
                overflow:hidden;
                .clear-list{
                  float: left;
                  overflow:hidden;
                  .clear-list-ico{
                    display:block;
                    float:left;
                    width:16px;
                    height:16px;
                    margin:7px 2px;
                    background:url(@playlistPic) no-repeat -50px 0;
                    &:hover{
                      background-position:-50px -20px;
                    }
                  }
                  .clear-list-text{
                    display:block;
                    float:right;
                    width:35px;
                    height:30px;
                    line-height:30px;
                    color:#cccccc;
                  }
                }
                .close-list-ico{
                  display:block;
                  float: right;
                  width:12px;
                  height:12px;
                  margin-top:7px;
                  margin-bottom:7px;
                  margin-right:15px;
                  background:url(@playlistPic) no-repeat -204px 1px;
                  &:hover{
                    background-position:-204px -29px;
                  }
                }
              }
            }
            .music-list-content{
              overflow-x:hidden;
              overflow-y:scroll;
              width:100%;
              height:170px;
              background-color:black;
              opacity:0.75;
              color:dimgray;
              ol{
                width:100%;
                height:100%;
                li{
                  width:100%;
                  height:24px;
                  line-height:24px;
                  list-style:none;
                  cursor:pointer;
                  clear: both;
                  &:hover{
                    background-color:dimgray; 
                    div{
                      color: white;
                    }
                    .music-load,.music-delete{
                      display: block !important;
                    }
                  }
                  div{
                    float:left;
                  }
                  .music-list-sn{
                    width:35px;
                    height:100%;
                    line-height:24px;
                    text-align:center;
                  }
                  .music-name{
                    width:200px;
                    height:100%;
                    line-height:24px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                  .music-signer{
                    width:120px;
                    height:100%;
                    line-height:24px;
                  }
                  .music-other{
                    width: 54px;
                    height: 24px;
                    .music-load{
                      display: none;
                      margin:0 5px;
                      width:18px;
                      height:24px;
                      background:url(@playlistPic) no-repeat -55px -45px;
                      &:hover{
                        background-position:-78px -45px;
                      }
                    }
                    .music-delete{
                      display: none;
                      margin:0 5px;
                      width:16px;
                      height:24px;
                      background:url(@playlistPic) no-repeat -50px 5px;
                      &:hover{
                        background-position:-50px -15px;
                      }
                    }
                  }
                  .music-list-totalTime{
                    margin-left: 10px;
                    width:32px;
                    height:100%;
                    line-height:24px;
                    text-align:center;
                  }
                }
				.init-background-color{
				  background-color:black;
				  div{
					color:dimgray;  
				  }
				}
				.change-background-color{
				  background-color:dimgray;
				  div{
					color:white;  
				  }
				}
			  } 
            }
			::-webkit-scrollbar{
			  width:8px;
			  background-color:rgba(255,255,255,0.6);
			  opacity:0.8;
			  cursor:pointer;
			}
			::-webkit-scrollbar-track{
			  background-color:rgba(0,0,0,0.6);
			}
			::-webkit-scrollbar-corner{
			  display: none;
			}
			::-webkit-scrollbar-button{
			  display: none;
			}
			::-webkit-scrollbar-thumb{
			  background-color:rgba(0,0,0,0.9);
			  border-radius:5px;
			  -webkit-box-shadow:inset 1px 1px rgba(0,0,0,1);
			}
          }
        }
      }	
	}
  }
}

//鼠标浮动时
.hoverStyle{
  height: 60px;
}
//鼠标离开时
.mouseleaveStyle{
  height: 14px;
}
*/
	
//第一版CSS样式，包含歌词	
/* *{
  margin:0;
  padding:0;
  font-size:12px;
  color:black;
}

audio{
  display:none;
}

//歌词列表---------------------------需要修改
//歌词显示区域
.lyric-area{
  height:300px;//歌词区域高度
  width:280px;//歌词区域宽度
  overflow: hidden; //隐藏超出部分
  margin:50px auto;
  border:1px solid #cccccc;
  box-shadow: #cccccc;
  position:relative;
}

//背景歌词画布设置
#lyric_bg{
  width:280px;
  line-height:20px;  //行高，这个值要用在歌词滚动距离上
  transition-duration:600ms; //滚动速度
  list-style:none;
  font-size:14px;
  font-family:"Helvetica Neue",serif;
  text-align:center;
  position:absolute;
  z-index:-10;
  overflow:hidden; //隐藏超出部分
}

//前景歌词画布设置
#lyric_fg{
  width:280px;
  line-height:20px;
  transition-duration: 600ms;
  list-style:none;
  font-size:14px;
  font-family: "Helvetica Neue",serif;
  text-align:center;
  position:absolute;
  z-index:1;
  color:transparent;
  overflow:hidden;
}

.distA{
  display: inline-block;
  width:12px;
}

//透明色
.transparentColor{
  color:transparent;
}

//覆盖色暂定为蓝色,可修改
.coverColor{
  color: blue;
}

.changeFgColor{
  width:280px;
  height:20px;
  position:absolute;
  //clip:rect(0px,86px,20px,52px);
}

.lrc-content{
  display:block;
  column-width:30px;
}


//往下为我自己写的样式
.play{
  width:100%;
  height:60px;
  position:fixed;
  bottom:0;
  transition:height 1s;
}
.play-lock{
  width:100%;
  height:14px;
  clear: both;
}
.lock-stuff{
  float:left;
  width:50%;
  height:100%;
}
.lock-ico{
  float:right;
  width:50%;
  height:100%;
  background:url("../assets/pic/playbar.png") no-repeat 0 -386px;
  cursor:pointer;
}
//开关锁的公共样式
.lock-style-common{
  width:20px;
  height:12px;
  margin:0 15px;
  background:url("../assets/pic/playbar.png") no-repeat;
}
//开锁状态
.unlock{
  background-position:-77px -382px;
}
.unlock:hover{
  background-position:-77px -402px;
}
//闭锁状态
.locked{
  background-position:-98px -382px;
}
.locked:hover{
  background-position:-98px -402px;
}

//鼠标浮动时
.hoverStyle{
  height: 60px;
}

//鼠标离开时
.mouseleaveStyle{
  height: 14px;
}

//播放列表主体
.play-list{
  width:100%;
  height:46px;
  background:url("../assets/pic/playbar.png") repeat-x 0 -8px;
}
//播放按键区
.play-content{
  width:900px;   //原距离892px
  height:42px;
  padding:2px 0;
  margin:auto;
  overflow:hidden;
}
//播放按钮部分
.play-btn-list{
  float:left;
  width:92px;
  height:100%;
  overflow:hidden;
}
//上一首按钮
.pre-btn{
  float:left;
  width:28px;
  height:100%;
  background:url("../assets/pic/playbar.png") no-repeat -80px -125px;
  cursor:pointer;
  transform:rotate(180deg);
}
.pre-btn:hover{
  background-position:-110px -125px;
}

//播放、暂停按钮公共样式
.play-paused-common{
  float:left;
  width:32px;
  height:100%;
  padding:0 2px;
  cursor:pointer;
}

//播放按钮
.play-btn{
  background:url("../assets/pic/playbar.png") no-repeat 0 -200px;
}

.play-btn:hover{
  background-position:-40px -200px;
}

//暂停按钮
.paused-btn{
  background:url("../assets/pic/playbar.png") no-repeat 0 -161px;
}

.paused-btn:hover{
  background-position:-40px -161px;
}

//下一首按钮
.next-btn{
  float:right;
  width:28px;
  height:100%;
  background:url("../assets/pic/playbar.png") no-repeat -80px -122px;
  cursor:pointer;
}
.next-btn:hover{
  background-position:-110px -122px;
}
//播放进度条
.play-pro{
  float:left;
  width:633px;   //原距离625px
  height:100%;
  margin:0 25px;
  overflow:hidden;
}
//歌手专辑
.play-ico{
  margin:4px auto;
  width:34px;
  height:34px;
  float:left;
}
.play-bar-list{
  float:right;
  height:100%;
  margin-left:10px;
  width:589px;   //原距离581px
}
//歌曲名和歌手名信息
.music-info{
  width:100%;
  height:20px;
  margin-left:10px;
}
.pro-music-name,.pro-singer-name{
  height:20px;
  line-height:20px;
  display:inline-block;
}
//音乐名
.pro-music-name{
  color:white;
}
//歌手名
.pro-singer-name{
  margin:0 10px;
  color:#cccccc;
}

.play-bar{
  width:100%;
  height:20px;
  overflow:hidden;
}
//进度条背景
.pro-bar{
  margin-left: 8px;
  float:left;
  width:493px;
  height:100%;
  background:url("../assets/pic/statbar.png") no-repeat 0 6px;
  position:relative;
  cursor:pointer;
}
//预加载进度条
.play-preload-pro-bar{
  height:100%;
  background:url("../assets/pic/statbar.png") no-repeat 0 -24px;
  position:absolute;
}
//播放进度条宽493px
.play-pro-bar{
  height:100%;
  background:url("../assets/pic/statbar.png") no-repeat 0 -60px;
  position:absolute;
}

//进度按钮
.play-block{
  width:16px;
  height:18px;
  background:url("../assets/pic/iconall.png") no-repeat -3px -251px;
  border-radius:10px;
  position:absolute;
}

//时间信息
.time-info{
  float:right;
  margin-left:0;
  width:79px;
  height:20px;
  overflow:hidden;
}
.music-currentTime,.music-totalTime,.division{
  height:100%;
  display:block;
  float:left;
  line-height:20px;
  color:white;
  text-align:center;
}
.music-currentTime,.music-totalTime{
  width:35px;
}
.division{
  width:8px;
}
.sound-model-list{
  float:left;
  width:125px;
  height:100%;
  overflow:hidden;
}
//处理声音
.play-sound{
  width:32px;
  height:100%;
  display:inline-block;
  float:left;
  cursor:pointer;
}
.sound{
  width:100%;
  height:100%;
  background: url("../assets/pic/playbar.png") no-repeat;
  cursor:pointer;
}
.open-voice{
  background-position:0 -240px;
}
.open-voice:hover{
  background-position:-29px -240px;
}
.closed-voice{
  background-position:-100px -60px;
}
.closed-voice:hover{
  background-position:-122px -60px;
}

.sound-bar{
  width: 33px;
  height: 114px;
  position:absolute;
  bottom:47px;
  background:url("../assets/pic/playbar.png") no-repeat 0 -502px;
}

//总高:96px
.sound-pro-bar{
  width:6px;
  height:48px;
  position:absolute;
  background:url("../assets/pic/playbar.png") no-repeat -39px -519px;
  bottom:10px;
  left:13px;
}

//bottom:9px最低,93px最高
.sound-block{
  width:12px;
  height:12px;
  border-radius:10px;
  position:absolute;
  background:url("../assets/pic/iconall.png") no-repeat -43px -253px;
  bottom:51px;     //只要控制bottom大小就可以调整
  left:10px;
}

//默认播放模式是列表循环，下面是默认播放模式
.common-model{
  width:32px;
  height:100%;
  background:url("../assets/pic/playbar.png") no-repeat;
  float:left;
  cursor:pointer;
}
.list-cycle{
  background-position:0 -335px;
}
.list-cycle:hover{
  background-position:-30px -335px;
}
.single-cycle{
  background-position:-63px -335px;
}
.single-cycle:hover{
  background-position:-90px -335px;
}
.random-play{
  background-position:-63px -240px;
}
.random-play:hover{
  background-position:-90px -240px;
}
.showModel{
  text-align: center;
  line-height: 24px;
  color: white;
  width: 60px;
  height: 24px;
  background-color:#292c2d;
  border-radius: 5px;
  opacity:0.8;
  margin-left: -15px;
  float: left;
  position: absolute;
  bottom: 47px;
  cursor: pointer;
}

.msg-note{
  text-align: center;
  line-height: 24px;
  color: white;
  width: 80px;
  height: 24px;
  background-color:#292c2d;
  border-radius: 5px;
  opacity:0.8;
  margin-left: -30px;
  float: left;
  position: absolute;
  bottom: 47px;
  cursor: pointer;
}

.play-music-list{
  width:56px;
  height:100%;
  float:right;
  cursor:pointer;
}
.music-list-ico{
  width:100%;
  height:36px;
  margin:5px 0;
  background:url("../assets/pic/playbar.png") no-repeat -45px -65px;
}
.music-list-ico:hover{
  background-position:-45px -95px;
}
.music-list-ico span{
  width:32px;
  height:32px;
  text-align:center;
  color:#cccccc;
  line-height:32px;
  display:inline-block;
  margin-left:20px;
}
.music-list{
  position:absolute;
  width:480px;
  height:200px;
  bottom:36px;
  right:80px;
  cursor:pointer;
}
.music-list-head{
  width:100%;
  height:30px;
  line-height:30px;
  overflow:hidden;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  background-color:black;
  opacity:0.8;
}
.music-list-info{
  float:left;
  padding-left:20px;
  color:#cccccc;
}
.music-number{
  color:#cccccc;
}
.clear-close-list{
  float:right;
  width:90px;
  height:100%;
  overflow:hidden;
}

.clear-list{
  float: left;
  overflow:hidden;
}
.clear-list-ico{
  display:block;
  float:left;
  width:16px;
  height:16px;
  margin:7px 2px;
  background:url("../assets/pic/playlist.png") no-repeat -50px 0;
}
.clear-list-ico:hover{
  background-position:-50px -20px;
}
.clear-list-text{
  display:block;
  float:right;
  width:35px;
  height:30px;
  line-height:30px;
  color:#cccccc;
}

.close-list-ico{
  display:block;
  float: right;
  width:12px;
  height:12px;
  margin-top:7px;
  margin-bottom:7px;
  margin-right:15px;
  background:url("../assets/pic/playlist.png") no-repeat -204px 1px;
}
.close-list-ico:hover{
  background-position:-204px -29px;
}

.music-list-content{
  overflow-x:hidden;
  overflow-y:scroll;
  width:100%;
  height:170px;
  background-color:black;
  opacity:0.75;
  color:dimgray;
}
::-webkit-scrollbar{
  width:8px;
  background-color:rgba(255,255,255,0.6);
  opacity:0.8;
  cursor:pointer;
}
::-webkit-scrollbar-track{
  background-color:rgba(0,0,0,0.6);
}
::-webkit-scrollbar-corner{
  display: none;
}
::-webkit-scrollbar-button{
  display: none;
}
::-webkit-scrollbar-thumb{
  background-color:rgba(0,0,0,0.9);
  border-radius:5px;
  -webkit-box-shadow:inset 1px 1px rgba(0,0,0,1);
}

.music-list-sn{
  width:35px;
  height:100%;
  line-height:24px;
  text-align:center;
}

.music-name{
  width:200px;
  height:100%;
  line-height:24px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.music-other{
  width: 54px;
  height: 24px;
}

.music-load{
  display: none;
  margin:0 5px;
  width:18px;
  height:24px;
  background:url("../assets/pic/playlist.png") no-repeat -55px -45px;
}
.music-load:hover{
  background-position:-78px -45px;
}
.music-delete{
  display: none;
  margin:0 5px;
  width:16px;
  height:24px;
  background:url("../assets/pic/playlist.png") no-repeat -50px 5px;
}
.music-delete:hover{
  background-position:-50px -15px;
}
.music-signer{
  width:120px;
  height:100%;
  line-height:24px;
}
.music-list-totalTime{
  margin-left: 10px;
  width:32px;
  height:100%;
  line-height:24px;
  text-align:center;
}

.music-list-content ol{
  width:100%;
  height:100%;
}
.music-list-content ol li{
  width:100%;
  height:24px;
  line-height:24px;
  list-style:none;
  cursor:pointer;
  clear: both;
}
.music-list-content ol li:hover{
  background-color:dimgray;
}
.music-list-content ol li:hover div{
  color: white;
}

.music-list-content ol li:hover .music-load{
  display: block;
}

.music-list-content ol li:hover .music-delete{
  display: block;
}

.music-list-content ol li div{
  float:left;
}

.init-background-color{
  background-color:black;
}
.change-background-color{
  background-color:dimgray;
}
.init-font-color div{
  color:dimgray;
}
.change-font-color div{
  color:white;
}

.font-size{
  -webkit-transform-origin-x:0;
  -webkit-transform:scale(0.9);
} */
</style>
